<template>
  <div id="qrCode"
       class="qrCode">
    <div class="mark"></div>
    <div class="qr-main">
      <i class="close fa fa-times"
         @click="close"></i>
      <div class="qr-title">
        注册二维码
      </div>
      <div id="all-qrcode"
           class="allQrcode"
           v-show="isShot">
        <div class="qr-dept"
             id="qr-dept">{{orgName}}<span v-if="storeName">&nbsp;- &nbsp;{{storeName}}</span><span v-if="groupName">&nbsp;-&nbsp;{{groupName}}</span></div>
        <canvas id="canvas"
                class="canvasSize"></canvas>
      </div>
      <img id="qrcodeImg"
           :src="imgUrl"
           v-if="!isShot"
           class="arCodeImg" />
      <div class="qr-info">
        长按保存到本地
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
import Html2canvas from "html2canvas";
export default {
  props: ["qrcode", "showCode"],
  data() {
    return {
      codes: "",
      orgName: "",
      storeName: "",
      groupName: "",
      imgUrl: "",
      isShot: true
    };
  },
  components: {
    QRCode,
    Html2canvas
  },
  watch: {
    imgUrl(v) {
      if (v.length < 10) {
        this.toImg();
      } else {
        this.isShot = false;
      }
    }
  },
  methods: {
    useqrcode() {
      var _self = this;
      _self.isShot = true;
      this.orgName = this.qrcode.orgName;
      this.storeName = this.qrcode.storeName;
      this.groupName = this.qrcode.groupName;
      let text = "";
      let urlsParams = "qudaowangRegister";
      if (this.orgName) {
        text += this.orgName;
        urlsParams += "|" + this.qrcode.orgId;
      }
      if (this.storeName) {
        text += "&nbsp;-" + this.storeName;
        urlsParams += "|" + this.qrcode.storeId;
      }
      if (this.groupName) {
        text += "&nbsp;-" + this.groupName;
        urlsParams += "|" + this.qrcode.groupId;
      }
      var canvas = document.getElementById("canvas");
      let url = window.location.origin;
      let urls = url.split(".");
      if (urls[1] != "0") {
        urls[1] = "agencych";
        url = urls.join(".");
        url += "/vendor-h5/" + window.location.search;
        url += "#/register";
        url += "/" + urlsParams;
      } else {
        url += "/register/" + urlsParams;
      }
      document.getElementById("qr-dept").innerHTML = text;
      QRCode.toCanvas(canvas, url, function (error) {
        _self.toImg();
      });
    },
    close() {
      var code = document.getElementById("qrCode");
      code.style.display = "none";
      this.$emit("update:showCode", false);
    },
    toImg() {
      var allQrcode = document.getElementById("all-qrcode");
      Html2canvas(allQrcode).then((canvas) => {
        this.imgUrl = canvas.toDataURL(); //图片地址
      });
    }
  }
};
</script>



<style scoped>
.allQrcode {
  width: 250px;
  height: 250px;
  margin: auto;
}
.arCodeImg {
  /* margin-right: 16px; */
  width: 250px;
  height: 250px;
}
.qrCode {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  outline: 0;
  z-index: 1500;
  display: none;
}
.mark {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  transition: opacity 0.15s linear;
  opacity: 0.5;
  z-index: 1010;
}
.qr-main {
  margin: 150px auto;
  text-align: center;
  z-index: 1040;
  position: relative;
  width: 350px;
  background: #fff;
}
.qr-dept {
  color: #ff6c00;
}
.qr-info {
  padding: 20px 0;
}
.close {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 20px;
}
.qr-title {
  margin: 0 0 30px 0;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}
</style>